<template>
  <v-card>
    <vcu-table
      ref="xtable"
      :columns="tableColumn"
      :data="tableData"
      @cell-mouseenter="cellMouseenterEvent"
      @cell-mouseleave="cellMouseleaveEvent"
    >
      <template slot="rowTips">
        <template v-if="visible">
          <popper :parentRefs="currRowEl">
            <div class="popper-demo">{{ currRows.name }}</div>
          </popper>
        </template>
      </template>
    </vcu-table>
  </v-card>
</template>
<script>
//正式开发环境请改成引用公共仓库 “@” 改成 “ylzhis13/common”
import popper from "@/components/popper";
import XEUtils from "xe-utils";

export default {
  components: { popper },
  data() {
    return {
      visible: false,
      currRowEl: null,
      currRows: null,
      tableColumn: [
        { type: "seq", width: 50 },
        { field: "name", title: "Name" },
        { field: "sex", title: "Sex", showHeaderOverflow: true },
        { field: "address", title: "Address", showOverflow: true },
      ],
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "好好学习天天向上",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women ",
          age: 24,
          address: "Shanghai",
        },
      ],
    };
  },
  computed: {},
  methods: {
    cellMouseenterEvent({ row, rowid }) {
      const _rows = document.getElementsByClassName("vcu-body--row");
      this.currRowEl = XEUtils.filter(_rows, (item) => {
        return item.dataset.rowid == rowid;
      })[0];
      this.visible = true;
      this.currRows = row;
    },
    cellMouseleaveEvent(obj) {
      this.visible = false;
      this.currRows = null;
    },
  },
};
</script>
<style lang="less" scoped>
.popper-demo {
  width: 200px;
  height: 200px;
  background: #ff0;
  position: absolute;
  z-index: 1111;
}
</style>
